<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-header">
            <h3>更新电影名称</h3>
          </div>
          <div class="card-body">
            <form @submit.prevent="updateMovieName">
              <div class="form-group">
                <label for="code">电影代码</label>
                <input
                  type="text"
                  class="form-control"
                  id="code"
                  v-model="code"
                  placeholder="请输入电影代码"
                  required
                />
              </div>
              <div class="form-group">
                <label for="newName">新电影名称</label>
                <input
                  type="text"
                  class="form-control"
                  id="newName"
                  v-model="newName"
                  placeholder="请输入新的电影名称"
                  required
                />
              </div>
              <button type="submit" class="btn btn-primary">更新电影名称</button>
            </form>

            <div v-if="message" class="mt-4 alert" :class="messageClass">
              {{ message }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      newName: '',
      message: '',
      messageClass: '',
    };
  },
  methods: {
    async updateMovieName() {
      try {
        const response = await fetch(
          `http://127.0.0.1:8000/api/update?code=${encodeURIComponent(
            this.code
          )}&name=${encodeURIComponent(this.newName)}`,
          {
            method: 'GET',
          }
        );

        if (!response.ok) {
          throw new Error('更新失败，请检查电影代码是否正确');
        }

        this.message = '电影名称更新成功！';
        this.messageClass = 'alert-success';

        this.code = '';
        this.newName = '';
      } catch (error) {
        this.message = error.message;
        this.messageClass = 'alert-danger';
      }
    },
  },
};
</script>

<style scoped>
.container {
  margin-top: 50px;
}

.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  background-color: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.card-body {
  padding: 20px;
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.btn-primary {
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.alert {
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 20px;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}
</style>